<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/css/normalize.css">
    <link rel="stylesheet" href="/static/css/all.css">
    <title>书籍页面</title>
</head>
<body>
<div id="app" style="width: {{screen_width}}px;height: 100%;overflow: hidden">
    <% include include/common-header.html %>
    <div class="container-scroll" style="width: {{screen_width}}px;overflow-y: scroll">
        <div class="book-page">
            <section class="main-card" style="border-bottom: none">
                <div class="u-book -detail">
                    <div class="book-cover">
                        <img :src=d.item.cover
                             alt="{{d.item.title}}">
                    </div>
                    <div class="info">
                        <h3 class="title">{{d.item.title}}</h3>
                        <p class="author">
                            <span>{{d.item.authors}}</span>
                        </p>
                        <div class="u-grade">
                            <span class="read">{{d.item.score_count}} 个评价</span>
                        </div>
                        <p class="price">价格：{{d.item.price}}书币/ 钳子</p>
                        <p class="count">
                            字数：{{d.item.word_count}}
                            <span class="u-booktag -serial">连载中</span>
                        </p>
                    </div>
                </div>
            </section>
            <section class="main-card">
                <div class="book-dash">
                    <div class="wrap">
                        <ul class="btn-group">
                            <li class="u-btn2" @click="readBook()">
                                <span class="book-dash-text"></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="u-folder">
                    <div class="folder-cnt">
                        {{d.item.content}}
                    </div>
                    <div class="folder-tail">
                        <div>最新：{{d.item.lastest}}</div>
                    </div>
                </div>
            </section>
            <section class="main-card">
                <div class="u-folder">
                    <div class="folder-top">
                        <h3>类别标签</h3>
                    </div>
                    <div class="folder-cnt">
                        <ul class="m-tag -color">
                            <li v-for="tag in item.tags">
                                <div class="u-tag">{{d.tag}}</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
            <section class="main-card">
                <div class="u-title">
                    <h3>作者的其他作品</h3>
                </div>
                <div class="cnt">
                    <ul class="book-table">
                        <li v-for="book in d.author_books">
                            <div class="u-book -vertical">
                                <div class="book-cover">
                                    <img :src="book.cover" alt="{{book.title}}">
                                </div>
                                <div class="info">
                                    <h4 class="title">{{book.title}}</h4>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
            <section class="main-card">
                <div class="u-title">
                    <h3>喜欢本书的人也喜欢</h3>
                </div>
                <div class="cnt">
                    <ul class="book-table">
                        <li v-for="book in d.related">
                            <div class="u-book -vertical">
                                <div class="book-cover">
                                    <img :src="book.cover" alt="{{book.title}}">
                                </div>
                                <div class="info">
                                    <h4 class="title">{{book.title}}</h4>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
            </section>
        </div>
    </div>
</div>
<script src="/static/js/vue.js"></script>
<script src="/static/js/zepto.js"></script>
<script src="/static/js/pages/all.js"></script>
<script src="/static/js/pages/book.js"></script>
</body>
</html>